<template>
	<view class="v-home-page" :style="{ '--bg-image': `url(${ materialBg})` }">
		<view :style="{ height: navTop + 'px' }"></view>

		<view class="flex-start-center " style="color:#333333" @click="navBack()">

			<uni-icons style="margin-top: 7rpx;" color="#333333" type="left" size="20"></uni-icons>
			<text style="color: 333333;font-size: 33rpx;"> 模版详情</text>
		</view>

		<view class="flex margin-top_20rpx">

			<view class="templateCenter">
				<video id="myVideo" :src="copyTypeInfo.outUrl" object-fit="contain"
					style="width:530rpx;height: 950rpx;border-radius: 20rpx;margin-left: 106rpx;" @pause="pauseFn">
				</video>
				<view class="viewSearch margin-top_40rpx">
					<!-- <image class="gradientImg" :src="PurpleBg" mode=""></image> -->

					<!-- <view class=" arrowsName font-overflow font-weight_bold" style="padding: 0 19rpx;width: 720rpx;">
						标题:{{copyTypeInfo.templateName}}
					</view> -->
					<!-- <view class=" arrows font-overflow " style="padding: 0 19rpx;width: 720rpx;">
						{{copyTypeInfo.videoCopywriting}}
					</view> -->
					<view class="flex-around arrows text-align_center" style="width:100%">
						<view class="">
							<view style="color: #4053FB;font-size: 32rpx;">{{totelName(copyTypeInfo.exposure)}}</view>
							<view style="color: rgba(128, 127, 127, 1);margin-top: 10rpx;">曝光量</view>
						</view>

						<view class="">
							<view style="color: #4053FB;font-size: 32rpx;">{{totelName(copyTypeInfo.callCount)}}</view>
							<view style="color: rgba(128, 127, 127, 1);margin-top: 10rpx;">使用人数</view>
						</view>
					</view>

					<view class="flex-between bgMusic" style="width: 100%;">
						<view class="">
							<view class="" style="color: #666666;margin-bottom: 30rpx;" v-if="copyTypeInfo.way==2">
								模版类型：自主添加
							</view>
							<view class="" style="color: #666666;margin-bottom: 30rpx;" v-else >
								模版分类：{{copyTypeInfo.classificationNameE+'/'+copyTypeInfo.classificationNameR}}
							</view>
						
							<view class=" " style="color: #666666;margin-top: 20rpx;">
								脚本类型：{{copyTypeInfo.editType==1?'老板ip单镜头':copyTypeInfo.editType==2?'老板IP多镜头':'口播同步'}}
							</view>
						</view>
						<view class="flex-column">


							<!-- <image @click="pause(copyTypeInfo.backgroundUrl)" v-if="!isPlay" class="bfImg"
								:src="digitalPeopPlay3"></image>


							<image @click="play(copyTypeInfo.backgroundUrl)" v-else class="bfImg"
								:src="digitalPeopPause3"></image>


							<text>播放</text> -->

						</view>
					</view>
					<view class="sameStyle flex-between">
						<button open-type="share" class="btncss">
							<view class="shareFirend flex">
								分享给好友

							</view>
						</button>

						<view class="sameStyleBtn flex " @click="cuTSameStyle()">

							<text>剪同款</text>
							<image class="goldCoinImg" src="/static/three/goldIcon.png" mode=""></image>
							<text style="color: #FFFF00;">{{tallySet.template_tally}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>




	</view>
</template>

<script>
	const innerAudioContext = uni.createInnerAudioContext();
	export default {
		data() {
			return {
				isPlay: 1,
				// 1 单镜头 2.多镜头 3. 场景版本
				type: 3,
				navTop: '',
				PurpleBg: this.$imgs.PurpleBg,
				gradient: this.$imgs.gradient,
				materialBg: 'https://tuanma.weijuyunke.com/index/images/material.png',
				videoShowUrl: 'https://yunhunjian123.oss-cn-shanghai.aliyuncs.com/1747213524742.mp4',
				copyTypeInfo: {},
				tallySet: uni.getStorageSync('tallySet'),
				user: uni.getStorageSync('user'),
				digitalPeopPause3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/pause3.png',
				digitalPeopPlay3: 'https://yuntt.weijuyunke.com/yunttXcxImage/digitalPeople/play3.png',
				uid: uni.getStorageSync('uid'),
				prevPage: true,
				id: '',
				memberSetObj: {}


			}
		},
		onLoad(options) {
			console.log()
			if (options.pid) {
				uni.setStorageSync('pid', options.pid);
			}




			const app = getApp();
			this.navTop = app.globalData.navTop;
			console.log(options)

			if (options.detailId) {
				this.id = options.detailId
				this.detailFn(options.detailId,options.way)
			} else {
				this.copyTypeInfo = JSON.parse((decodeURIComponent(options.obj)));
				console.log(this.copyTypeInfo)
				
			}



			this.userInfos()
			this.tallySetFn()
			this.memberSetFn()

			const pages = getCurrentPages(); // 获取当前页面栈的实例数组
			if (pages.length > 1) {
				this.prevPage = true
			} else {
				this.prevPage = false
			}
		},

		computed: {
			totelName: function() {
				return function(num) {
					if (num >= 10000000) { // 如果是千万
						let remainder = num % 10000000;
						let quotient = Math.floor(num / 10000000);
						let decimal = Math.floor(remainder / 1000000);
						return quotient + '.' + decimal + '千万';
					} else if (num >= 10000) { // 如果是万
						let remainder = num % 10000;
						let quotient = Math.floor(num / 10000);
						let decimal = Math.floor(remainder / 1000);
						return quotient + '.' + decimal + '万';
					} else { // 小于万
						if (num) {
							return num.toString();
						} else {
							return 0
						}
					}
				};
			}

		},
		methods: {
			/* 声音播放 start */
			play(speech) {
				// this.soundSaveFn(speech.id)

				console.log(speech)
				this.isPlay = '';


				innerAudioContext.src = speech




				innerAudioContext.play();
				innerAudioContext.onPlay(() => {
					console.log('开始播放');
				});
				innerAudioContext.onEnded(() => {
					this.isPlay = 1;

					innerAudioContext.pause();
					// this.$sun.toast("音频播放完成");
					console.log('音频播放结束：');
				});
				innerAudioContext.onError(err => {
					innerAudioContext.destroy();
					console.log('播放音频出错：', err);
				});

			},
			pause(speech) {

				this.isPlay = 1;
				innerAudioContext.src = speech
				// 获取音频时长
				innerAudioContext.autoplay = true;
				this.$nextTick(() => {
					innerAudioContext.pause();
				});
			},
			handleLogin() {
				
				if (uni.getStorageSync('uid')) {
					return true;
				} else {
					setTimeout(()=>{
						this.$sun.toast("请先授权登录");
					},500)
					uni.switchTab({
						url: `/pages/mine/mine`
					});
				}
			},

			onShareAppMessage(res) {
				console.log(res)
				if (res.from === 'button') {
					// 来自页面内分享按钮
					// this.addShare();
					return {
						// path: '/pages/detail/detail?goods_id=' + this.detailInfo.id + '&type=' + this.activitType + '&uid=' +
						// 	(uni.getStorageSync('uid') ? uni.getStorageSync('uid') : ''),
						// 自定义分享标题
						title: this.copyTypeInfo.editType == 1 ? '老板ip单镜头' : this.copyTypeInfo.editType == 2 ? '老板IP多镜头' :
							'口播同步',
						imageUrl: this.copyTypeInfo.outUrl + '?x-oss-process=video/snapshot,t_0,f_jpg',
						desc: this.copyTypeInfo.videoCopywriting,
						path: '/pagesA/creatCenter/creativeList/templateDetail?pid=' + (uni.getStorageSync("uid") ? uni
							.getStorageSync("uid") : '') + '&detailId=' + this.copyTypeInfo.id+'&way=' + this.copyTypeInfo?.way?this.copyTypeInfo?.way:1
					};
				} else {
					return {
						// 自定义分享标题
						title: this.copyTypeInfo.editType == 1 ? '老板ip单镜头' : this.copyTypeInfo.editType == 2 ? '老板IP多镜头' :
							'口播同步',
						imageUrl: this.copyTypeInfo.outUrl + '?x-oss-process=video/snapshot,t_0,f_jpg',
						desc: this.copyTypeInfo.videoCopywriting,
						path: '/pagesA/creatCenter/creativeList/templateDetail?pid=' + (uni.getStorageSync("uid") ? uni
							.getStorageSync("uid") : '') + '&detailId=' + this.copyTypeInfo.id+'&way=' + this.copyTypeInfo?.way?this.copyTypeInfo?.way:1
					}
				}


			},
			async detailFn(id,way) {

				const result = await this.$http.get({
					url: this.$api.templateDetail,
					data: {
						// 用户id
						// uid: uni.getStorageSync('uid'),
						id: id,
						way:way?way:1
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					console.log(result.data)
					this.copyTypeInfo = result.data



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			async userInfos() {
				const result = await this.$http.get({
					url: this.$api.userInfo,
					data: {
						// 用户id
						uid: uni.getStorageSync('uid'),
						// 上级id
						// pid: ''
					}
				});
				if (result.errno == 0) {
					this.user = result.data;

					uni.setStorageSync('user', result.data);


				}
			},
			async tallySetFn() {
				const result = await this.$http.get({
					url: this.$api.tallySet,

				});
				if (result.errno == 0) {
					console.log(result.data)

					uni.setStorageSync('tallySet', result.data);



				} else {
					this.$sun.toast(result.message, 'none')
				}
			},
			pauseFn() {

			},
			navBack() {
				if (this.prevPage) {
					this.$sun.navBack()
				} else {
					this.$sun.navRe('/pages/index/index')
				}


			},
			async memberSetFn() {
				const result = await this.$http.get({
					url: this.$api.memberSet,
					data: {


					}
				});
				if (result.errno == 0) {

					this.memberSetObj = result.data

					console.log(result.data)

				}
			},

			cuTSameStyle() {

				if (this.handleLogin()) {
					// 判断是否为会员不是去充值
					if (this.user.is_member == 0 && this.memberSetObj.is_open == 1) {

						uni.showModal({
							title: '温馨提示',
							content: '你当前不是会员，请开通会员后享受该功能',
							confirmText: '开通会员',
							confirmColor: '#4A5EFF',
							success: async (res) => {
								if (res.confirm) {


									this.$sun.navGo('/pages/contactUs/memberCenter')

								} else if (res.cancel) {

								}
							}
						});

					} else {
						if (this.copyTypeInfo.editType == 1) {
							if (this.handleLogin()) {
								this.$sun.navGo('/pagesA/creatCenter/creativeList/singleBossIPCreation?obj=' +
									encodeURIComponent(
										JSON
										.stringify(
											this.copyTypeInfo)))
							}


						} else if (this.copyTypeInfo.editType == 2) {
							if (this.handleLogin()) {

								this.$sun.navGo('/pagesA/creatCenter/creativeList/bossIPCreation?obj=' +
									encodeURIComponent(JSON
										.stringify(
											this.copyTypeInfo)))
							}


						} else {
							if (this.handleLogin()) {
								this.$sun.navGo('/pagesA/creatCenter/creativeList/broadcastSynchronization?obj=' +
									encodeURIComponent(
										JSON
										.stringify(
											this.copyTypeInfo)))
							}


						}

					}

				}







			}

		}
	}
</script>

<style lang="less">
	.v-home-page {
		// background-image: (var(--bg-image));
		background-color: #F0F2FE;
		background-repeat: no-repeat;
		background-size: cover;
		position: relative;
		height: 100vh;
		padding: 0 20rpx;

		.templateCenter {
			// margin-right: 10rpx;
			margin-top: 25rpx;
		}

		.templateCenterImg {
			width: 350rpx;
			height: 520rpx;
		}

		.viewSearch {
			position: relative;
			border-radius: 30rpx;

			background: linear-gradient(180.00deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 1) 100%);

			width: 740rpx;
			height: 446rpx;

			.blackColor {
				width: 600rpx;
				height: 60rpx;

				background-color: #000;
				position: relative;
				top: -505rpx;
				z-index: 1;
			}



			.arrows {
				position: absolute;
				top: 25rpx;
				z-index: 88;
			}

			.arrowsName {
				position: absolute;
				font-size: 32rpx;
				top: 36rpx;
				z-index: 88;
			}

			.bgMusic {
				position: absolute;
				top: 136rpx;
				z-index: 88;
				padding: 0 20rpx;
				margin: 30rpx 0;

				.bfImg {
					width: 60rpx;
					height: 60rpx;
					margin-bottom: 10rpx;
				}
			}



			.sameStyle {
				padding: 12rpx;

				position: absolute;
				top: 330rpx;
				padding: 0 15rpx;
				z-index: 88;

				.shareFirend {
					border-radius: 12rpx;
					width: 257.72rpx;
					height: 98rpx;
					background: linear-gradient(90.00deg, rgb(0, 237, 164), rgb(64, 227, 177) 100%);
					color: #fff;
					margin-right: 30rpx;
				}

				.sameStyleBtn {

					width: 427.94rpx;
					height: 98rpx;
					border-radius: 12rpx;

					background: linear-gradient(90.00deg, rgb(99, 91, 252), rgb(61, 82, 251) 100%);
					color: #fff;

					.goldCoinImg {
						width: 35rpx;
						height: 35rpx;
						margin: 0 7rpx 0 15rpx;
					}
				}

			}

			.gradientImg {
				// margin-left: -2rpx;
				margin-top: -23rpx;
				// width: 354rpx;
				// height: 228.2rpx;
				width: 750rpx;
				position: relative;
				z-index: 9;
				height: 504rpx;
			}

		}
	}
</style>